<template>
  <view class="vipMain">
    <mineNavbar :styleData="styleData" />

    <scroll-view class="scroll" scroll-y>
      <view class="topImg">
        <image
          class=""
          src="../../../../static/images/emterpriseVip/vipBox.png"
          mode="aspectFit|aspectFill|widthFix"
          lazy-load="false"
          binderror=""
          bindload="" />
      </view>

      <view class="content">
        <view class="desc"> 四大优势 为企业保驾护航 </view>

        <view class="privilege">
          <view class="item" v-for="item in privilegeList">
            <image
              class="image"
              :src="item.icon"
              mode="aspectFit|aspectFill|widthFix"
              lazy-load="false"
              binderror=""
              bindload="" />

            <view class="text">
              {{ item.text }}
            </view>
          </view>
        </view>
      </view>

      <view class="rule">
        <view class="title"> 薪马马企业规则 </view>

        <view class="ruleText"> VIP规则内容VIP规则内容VIP规则内容VIP规则 </view>
        <view class="ruleText"> VIP规则内容VIP规则内容VIP规则内容VIP规则 </view>
        <view class="ruleText"> VIP规则内容VIP规则内容VIP规则内容VIP规则 </view>
        <view class="ruleText"> VIP规则内容VIP规则内容VIP规则内容VIP规则 </view>
        <view class="ruleText"> VIP规则内容VIP规则内容VIP规则内容VIP规则 </view>
        <view class="ruleText"> VIP规则内容VIP规则内容VIP规则内容VIP规则 </view>
      </view>

      <view class="apply" @click="handClick"> 开通企业VIP </view>

      <view class="user">
        <image
          @click="handChecked"
          v-if="checked === false"
          class="checked"
          src="../../../../static/images/emterpriseVip/false.png"
          mode="aspectFit|aspectFill|widthFix"
          lazy-load="false"
          binderror=""
          bindload="" />
        <image
          @click="handChecked"
          v-if="checked"
          class="checked"
          src="../../../../static/images/emterpriseVip/true.png"
          mode="aspectFit|aspectFill|widthFix"
          lazy-load="false"
          binderror=""
          bindload="" />

        <text class="text" selectable="false" space="false" decode="false">
          我已阅读并同意<text @click="toPath(1)">《用户协议》</text
          ><text @click="toPath(2)">《隐私政策》</text>
        </text>
      </view>
    </scroll-view>

    <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
      <view class="dialog">
        <view class="dialogTop">
          <view class="success"> </view>

          <view class="close" @click="close">
            <!-- <image
              class="image"
              src="@/static/images/emterpriseVip/close.png"
              mode="aspectFit|aspectFill|widthFix"
              lazy-load="false"
              binderror=""
              bindload="" /> -->
          </view>
        </view>

        <view class="content">
          <view class="icon">
            <image
              class=""
              src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/19/a606f79f339b42c7921a07678e9171c7.svg"
              mode="aspectFit|aspectFill|widthFix"
              lazy-load="false"
              binderror=""
              bindload="" />
          </view>

          <view class="status"> 更多权益，敬请期待 </view>

          <view class="desc-i">
            <!-- 感谢您对薪马马企业VIP服务的支持
            我们的工作人员将在1个工作日内与您联系 -->
          </view>

          <view class="btn" @click="close">
            <text class="text" selectable="false" space="false" decode="false">
              确认
            </text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import navbar from "./components/navbar.vue";
export default {
  components: { navbar },
  data() {
    return {
      styleData: {
        tabbarText: "企业VIP",
        color: "#ffffff",
        show: true,
      },
      // 勾选
      checked: false,

      // 弹窗
      dialog: false,
      privilegeList: [
        {
          text: "特权一",
          icon: "../../../../static/images/emterpriseVip/zs.png",
        },
        {
          text: "特权二",
          icon: "../../../../static/images/emterpriseVip/xz.png",
        },
        {
          text: "特权三",
          icon: "../../../../static/images/emterpriseVip/q.png",
        },
        {
          text: "特权四",
          icon: "../../../../static/images/emterpriseVip/bq.png",
        },
      ],
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) {},
  onShow() {},
  onReady() {},
  methods: {
    handChecked() {
      this.checked = !this.checked;
    },

    handClick() {
      // if (this.checked === false) {
      //   return uni.showToast({
      //     title: "请勾选下方协议",
      //     icon: "none",
      //   });
      // }

      this.open("center");
    },
    close() {
      this.$refs.popup.close();
      uni.navigateBack();
    },

    open() {
      this.$refs.popup.open("center");
    },
    toPath(v) {
      switch (v) {
        case 1:
          uni.navigateTo({
            url: "/subPage/enterprise/mine/details/userAgreement",
          });
          break;
        case 2:
          uni.navigateTo({
            url: "/subPage/enterprise/mine/details/privacy",
          });
          break;
        default:
          break;
      }
    },
  },
  mounted() {
    this.handClick();
  },
};
</script>
<style lang="scss">
.vipMain {
  position: relative;
  height: 100vh;
  background-color: #232323;
  display: flex;
  flex-direction: column;
  align-items: center;

  .scroll {
    position: relative;
    flex: 1;
    display: flex;

    flex-direction: column;
    align-items: center;

    width: 652rpx;

    .topImg {
      width: 100%;
      height: 400rpx;
      //   background-color: red;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: 36rpx;
      .desc {
        width: 363rpx;
        font-family: PingFang-SC-Heavy;
        font-weight: 900;
        font-size: 32rpx;
        color: #ffe1ba;
        letter-spacing: 0;
      }
    }

    .privilege {
      width: 611rpx;
      display: flex;
      justify-content: space-between;
      margin-top: 36rpx;

      .item {
        .image {
          width: 98rpx;
          height: 98rpx;
          margin-bottom: 12rpx;
        }

        .text {
          font-weight: 700;
          font-size: 24rpx;
          color: #ffffffa3;

          text-align: center;
        }
      }
    }

    .rule {
      margin-top: 60rpx;
      width: 652rpx;
      height: 409rpx;

      border: 1rpx solid #ffe2b2;
      border-radius: 20rpx;
      box-sizing: border-box;

      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx;

      .title {
        font-weight: 900;
        font-size: 32rpx;
        color: #f6d7ae;
        text-align: center;
        margin-bottom: 28rpx;
      }

      .ruleText {
        font-weight: 700;
        font-size: 26rpx;
        color: #ffffffa3;
        letter-spacing: 0;
        padding-bottom: 15rpx;
      }
    }

    .apply {
      margin: 0 auto;
      width: 512rpx;
      height: 98rpx;
      line-height: 98rpx;
      text-align: center;
      background-image: linear-gradient(270deg, #ffdfa8 0%, #eec28b 86%);
      border-radius: 49rpx;
      margin-top: 55rpx;
    }

    .user {
      display: flex;
      height: 33rpx;
      justify-content: center;
      align-items: center;
      margin-top: 24rpx;

      .text {
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffffa3;
        letter-spacing: 0;
        text-align: center;
        margin-left: 8rpx;
      }

      .checked {
        width: 28rpx;
        height: 28rpx;
      }
    }
  }

  .dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 670rpx;
    height: 758rpx;
    background-image: linear-gradient(
      180deg,
      #fff6eb 1%,
      #ffffff 6%,
      #ffffff 100%
    );
    border-radius: 32rpx;

    .dialogTop {
      display: flex;
      justify-content: space-between;
      padding: 32rpx;

      .success {
        width: 144rpx;
        height: 50rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #000000e0;
      }

      .close {
        width: 48rpx;
        height: 48rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .content {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;

      .icon {
        width: 164rpx;
        height: 164rpx;
        margin-bottom: 32rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .status {
        //width: 144rpx;
        height: 50rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 36rpx;
        color: #000000e0;

        text-align: center;
        margin-bottom: 10rpx;
      }

      .desc-i {
        width: 442rpx;
        height: 66rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 24rpx;
        color: #00000073;
        letter-spacing: 0;
        text-align: center;
        margin-bottom: 120rpx;
      }

      .btn {
        width: 390rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: #ff9e24;
        border-radius: 44rpx;

        .text {
          font-weight: 500;
          font-size: 28rpx;
          color: #ffffff;
          letter-spacing: 0;
        }
      }
    }
  }
}
</style>
